<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>组件</title>
</head>

<body>
    <div id="app">
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <simple-counter></simple-counter>
        <h1>组合组件</h1>
        <h2>1.Props</h2>
        <child message="hello!"></child>
        <h2>2.camelCase vs. kebab-case</h2>
        <child2 my-message="Hello"></child2>
        <h3>3.动态 Props</h3>
        <div>
            <input v-model="parentMsg">
            <br>
            <child2 v-bind:my-message="parentMsg"></child2>
        </div>
        <hr style="width: 100%;height: 2px;border: none;border-top: 2px dashed #000;">
        <h1>自定义事件</h1>
        <h2>1.使用 v-on 绑定自定义事件</h2>
        <p>{{ total }}</p>
        <button-counter v-on:increment="incrementTotal"></button-counter>
        <button-counter v-on:increment="incrementTotal"></button-counter>

        <h2>2.使用自定义事件的表单输入组件</h2>
        <p>{{ message }}</p>
		<my-input label="Message" v-model="message"></my-input>
    </div>
    <script type="text/javascript" src="../lib/vue.js"></script>
    <script type="text/javascript">
    Vue.component('simple-counter', {
        template: '<button v-on:click="counter ++">{{counter}}</button>',
        data: function() {
            return {
                counter: 0
            }
        }
    })

    Vue.component('child', {
        // 声明 props
        props: ['message'],
        // 就像data一样, prop 也可以用在模板内
        // and is also made available in the vm as this.message
        template: '<span>{{ message }}</span>'
    })

    Vue.component('child2', {
        // camelCase in JavaScript
        props: ['myMessage'],
        template: '<span>{{ myMessage }}</span>'
    })


    Vue.component('button-counter',{
    	template:'<button v-on:click="increment">{{ counter }}</button>',
    	data:function(){
    		return {
    			counter:0
    		}
    	},
    	methods:{
    		increment:function(){
    			this.counter ++
    			this.$emit('increment')
    		}
    	}
    })

    Vue.component('my-input',{
    	template:'<div calss="form-group"><label v-bind:for="randomId">{{ label }}</label><input type="text" v-bind:id="randomId" v-bind:value="value" v-on:input="onInput"/></div>',
    	props:['value','label'],
    	data:function(){
    		return {
    			randomId:'input-'+Math.random()
    		}
    	},
    	methods:{
    		onInput:function(){
    			this.$emit('input',event.target.value)
    		}
    	}
    })

    var app = new Vue({
        el: '#app',
        data: {
            parentMsg: 'Vue',
            total:0,
            message:'Hello'
        },
        methods:{
        	incrementTotal:function(){
        		this.total++
        	}
        }
    })
    </script>
</body>

</html>
